<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <link href="/images/favicon.ico" rel="icon" type="image/x-icon"/>
    <link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <title>EIISAN管理系统</title>
    <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .hide {
            display: none;
        }

        #login-page {
            width: auto;
            min-width: 1190px;
            background-color: transparent;
        }

        .header {
            padding: 22px 0px;
            height: 44px;
            width: 1190px;
            margin: auto;
        }

        .header-logo {
            font-size: 24px;
            font-family: 'YouYuan', 幼圆;
            font-weight: 700;
            color: #f28b01;
        }

        .content {
            position: relative;
            width: 100%;
            margin-bottom: 40px;
        }

        #login-banner-wrap .login-bg {
            position: relative;
            background-image: url(/images/login-wrap.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            width: 1190px;
            height: 600px;
            margin: auto;
        }

        #login-banner-wrap img {
            display: block;
            margin: auto;
        }

        .content .form {
            position: absolute;
            top: 91px;
            right: 106px;;
            background: #fff;
        }

        .content .form-content {
            position: relative;
            width: 306px;
            padding: 20px;
        }

        .form .msg-wrap {
            min-height: 23px;
            margin-top: 5px;
            margin-bottom: 5px;
            width: 304px;
            height: auto !important;
            height: 23px;
        }

        .form .msg-error {
            position: relative;
            background: #ffebeb;
            color: #e4393c;
            font-size: 12px;
            border: 1px solid #faccc6;
            padding: 3px 10px 3px 40px;
            line-height: 15px;
            *line-height: 14px;
            height: auto;
        }

        .form .msg-error b {
            position: absolute;
            top: 50%;
            left: 10px;
            display: block;
            margin-top: -8px;
            width: 16px;
            height: 16px;
            overflow: hidden;
            background: url(/images/pwd-icons-new.png) -104px -49px no-repeat;
        }

        .form .msg-warn {
            position: relative;
            background: #fef4e5;
            color: #666;
            font-size: 12px;
            border: 1px solid #f6c090;
            padding: 3px 10px 3px 40px;
            line-height: 15px;
            height: auto;
        }

        .form .msg-warn b {
            position: absolute;
            top: 50%;
            left: 10px;
            display: block;
            margin-top: -8px;
            width: 16px;
            height: 17px;
            overflow: hidden;
            background: url(/images/pwd-icons-new.png) -104px -24px no-repeat;
        }

        .form-content .login-title {
            height: 18px;
            line-height: 18px;
            font-size: 16px;
            color: #3c3c3c;
            padding-bottom: 0;
            font-weight: 700;
        }

        .form a {
            color: #666;
            text-decoration: none;
        }

        .form a:hover {
            color: #E4393C;
            text-decoration: underline;
        }

        .form .label, .form button, .form input, .form label, .form select, .form textarea {
            font-size: 12px;
        }

        .form label {
            float: none;
        }

        .form .item {
            position: relative;
            margin-bottom: 12px;
            z-index: 1;
        }

        .form .item-fore1, .form .item-fore2 {
            border: 1px solid #bdbdbd;
            height: 38px;
            width: 304px;
        }

        .form .item-fore1 {
            z-index: 6;
        }

        .form .item .login-label {
            position: absolute;
            z-index: 3;
            top: 0px;
            left: 0px;
            width: 38px;
            height: 38px;
            border-right: 1px solid #bdbdbd;
            background: url(/images/pwd-icons-new.png) no-repeat;
        }

        .form .item .name-label {
            background-position: 0 0;
        }

        .form .item .pwd-label {
            background-position: -48px 0;
        }

        .form .itxt {
            line-height: 18px;
            height: 18px;
            border: 0;
            padding: 10px 0 10px 50px;
            width: 254px;
            float: none;
            overflow: hidden;
            font-size: 14px;
            font-family: '\5b8b\4f53';
            *margin: -1px 0 0;
        }

        .form input[type="password"] {
            font-family: Tahoma, Helvetica, Arial;
        }

        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px #fff inset;
        }

        .form .itxt02 {
            padding: 10px 5px;
            width: 150px;
            text-align: center;
        }

        .form .verify-code {
            cursor: pointer;
            width: 86px;
            height: 34px;
            vertical-align: middle;
        }

        .form .item-vcode .itxt02, .form .item-vcode .verify-code {
            float: left;
        }

        .form .item-vcode a {
            display: inline-block;
            font-size: 12px;
            width: 38px;
            float: right
        }

        .form .item-vcode:after {
            display: block;
            content: " ";
            height: 0;
            clear: both;
            overflow: hidden;
            visibility: hidden
        }

        .form #authcode.item {
            border: 0;
        }

        .form #authcode.item .itxt {
            border: 1px solid #bdbdbd;
            font-size: 14px;
            padding: 7px 5px;
            vertical-align: middle;
            margin-right: 10px;
        }

        .form input::-webkit-input-placeholder {
            color: #999;
            font-size: 14px
        }

        .form input:-moz-placeholder {
            color: #999;
            font-size: 14px;
        }

        .form .item-fore3 {
            z-index: 5;
            width: 304px;
        }

        .form .item-fore4 {
            *float: left;
        }

        .form .safe {
            position: relative;
            color: #666;
            *float: left;
            *width: 305px;
        }

        .form .safe span {
            margin-right: 15px;
            *float: left;
        }

        .form .safe .forget-pw-safe {
            position: absolute;
            *float: right;
            *position: static;
            right: 0;
            top: 0;
            margin: 0;
        }

        .form .item-fore5 {
            margin-bottom: 14px
        }

        .form .login-btn {
            border: 1px solid #0f88eb;
            margin: 0 auto;
            height: 32px;
            width: 99%;
            position: relative;
        }

        .form .login-btn .btn-img {
            border: 1px solid #0f88eb;
            width: 302px;
            background: #0f88eb;
            height: 32px;
            line-height: 32px;
            color: #fff;
            font-size: 20px;
            font-family: 'Microsoft YaHei';
            cursor: pointer;
        }

        .form .third-part {
            margin-bottom: 0px;
            border-top: 2px solid #eee;
            padding-top: 3px;
        }

        .third-part span {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }

        .third-part .qq, .third-part .wechat {
            display: inline-block;
            background-image: url(/images/login-third-party.png);
            background-repeat: no-repeat;
            margin-right: 5px;
            width: 24px;
            height: 24px;
        }

        .third-part .qq {
            background-position: -88px 0;
        }

        .third-part .wechat {
            background-position: -88px -24px;
        }

        .third-part .register-now {
            width: 236px;
            margin-top: 3px;
        }

        .third-part .register-now span {
            display: inline-block;
        }

        .third-part .register-now .register {
            text-align: right;
        }

        .third-part .register-now .register a {
            color: #428bca;
            margin-left: 18px;
        }
    </style>
</head>
<body>
<div id="login-page">
    <div class="header">
        <a class="header-logo">ECCA颐信科技</a>
    </div>
    <div class="content">
        <div id="login-banner-wrap" style="width: 100%; background-color: #F0F8FF;">
            <div class="login-bg"></div>
        </div>
        <div class="form">
            <div class="form-inner">
                <div class="form-content">
                    <div class="login-title">密码登录</div>
                    <div class="msg-wrap">
                        <div id="msgDiv" class="msg-error hide"><b></b>${errormess!''}</div>
                    </div>
                    <form id="form1" name="form1" method="post" style="margin-bottom:0px;" onsubmit="return false;">
                        <div class="item item-fore1">
                            <label class="login-label name-label" title="账号"></label>
                            <input id="loginname" class="itxt" name="loginname" tabindex="1" autocomplete="off"
                                   value="${loginname !''}"" placeholder="用户名/已验证手机" type="text">
                        </div>
                        <div class="item item-fore2" style="visibility: visible;">
                            <label class="login-label pwd-label" title="密码"></label>
                            <input id="password" name="password" class="itxt itxt-error" tabindex="2"
                                   autocomplete="off" placeholder="密码" type="password">
                        </div>

                        <div id="authcode" class="item item-vcode item-fore3 <#if Session.remote_loginErrNum??><#if Session.remote_loginErrNum lt 3>hide</#if><#else>hide</#if>">
                            <input id="verifycode" class="itxt itxt02" name="verifycode" tabindex="3" autocomplete="off" style="ime-mode: disabled;" type="text">
                            <img id="verifycodeImg" class="verify-code" src="/login/verifycode" title="点击换一张"
                                 style="cursor:hand;" onclick="this.src='/login/verifycode?yzs='+new Date().getTime()"/>
                            <a href="javascript:;" onclick="$('#verifycodeImg').click();" style="outline: 0px none rgb(109, 109, 109);">看不清换一张</a>
                        </div>
                        <div class="item item-fore4">
                            <div class="safe">
                                <span></span>
                                <span class="forget-pw-safe">
									<a href="user_forgotPwd" style="outline: 0px none rgb(109, 109, 109);">忘记密码</a>
								</span>
                            </div>
                        </div>
                        <div class="item item-fore5">
                            <div class="login-btn">
                                <button id="loginsubmit" class="btn-img">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
                            </div>
                        </div>
                        <div class="item third-part">
                            <span style="width: 200px;">第三方帐号登录</span>
                            <span><font color="red"></font></span>
                            <a id="qqAuthorizationUrl" class="qq" href="/remote/user_qqlogin"></a>
                            <!-- <a id="wechatAuthorizationUrl" class="wechat" href="" target="_blank"></a> -->
                            <div class="register-now"><span>还没有ECCA帐号？</span>
                                <span class="register">
				                	<a href="/remote/user_register" target="_blank">立即注册</a>
				                </span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    if (window.top !== window.self) {
        window.top.location = window.location;
    }
    $(function () {
        var $msgDiv = $("#msgDiv");
        if ($msgDiv.text() != "") {
            $msgDiv.removeClass("hide");
        }
        $("#loginsubmit").click(loginSubmit);
    });

    function loginSubmit() {
        if (!checkForm()) {
            return;
        }
        $('#loginsubmit').html("正在登录...");
        var loginUrl = "/login/auth";
        $.ajax({
            url: loginUrl,
            type: "POST",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data: {
                loginname: $('#loginname').val(),
                password: $('#password').val(),
                verifycode: $('#verifycode').val()
            },
            error: function () {
                showMesInfo("网络超时，请稍后再试", "error");
            },
            success: function (result) {
                if (result) {
                    console.log(result);


                    if (result.code == 1000) {

                        var obj = eval('(' + result.data + ')');
                        console.log(obj);
                        //var back_url = obj.backUrl;

                        var back_url = "/index";
                        var isIE = !-[1,];
                        if (isIE) {
                            var link = document.createElement("a");
                            link.href = back_url;
                            link.style.display = 'none';
                            document.body.appendChild(link);
                            link.click();
                        } else {
                            window.location = back_url;
                        }
                        return;
                    } else {
                        var obj = eval('(' + result.message + ')');

                        if(obj.useVerifycode){
                            $("#authcode").removeClass("hide");
                            $('#verifycodeImg').click();
                        }
                        if(obj.verifycode){
                            showMesInfo(obj.verifycode, "error");
                        }
                        if(obj.pwd){
                            showMesInfo(obj.pwd, "error");
                        }
                    }
                    $("#verifycode").val("");
                    $("#password").val("");
                    $("#loginsubmit").html("登&nbsp;&nbsp;&nbsp;&nbsp;录");
                }
            }
        });
    }

    function checkForm() {
        var $loginname = $("#loginname");
        var $password = $("#password");
        var $verifycode = $("#verifycode");
        if (isEmpty($loginname.val())) {
            $loginname.focus();
            showMesInfo("请输入账号！", "error");
            return false;
        }
        if (isEmpty($password.val())) {
            $password.focus();
            showMesInfo("请输入密码！", "error");
            return false;
        }
        if (!$('#authcode').hasClass("hide") && isEmpty($verifycode.val())) {
            $verifycode.focus();
            showMesInfo("请输入验证码！", "error");
            return false;
        }
        return true;
    }

    function showMesInfo(msg, type) {
        $('.form .msg-wrap').empty();
        if (type == 'warn') {
            var info = '<div class="msg-warn"><b></b>' + msg + '</div>';
            $('.form .msg-wrap').append(info);
        }
        if (type == 'error') {
            var info = '<div class="msg-error"><b></b>' + msg + '</div>';
            $('.form .msg-wrap').append(info);
        }
    }

    function isEmpty(value) {
        if (value == null || value == "" || value == undefined) {
            return true;
        } else {
            value = (value + "").replace(/\s/g, '');
            if (value == "") {
                return true;
            }
            return false;
        }
    }
</script>
</body>
</html>